<script setup>
import { reactive, onMounted, toRef, toRaw } from 'vue'
import { useRoute } from 'vue-router'
import { getBlogById } from '../api/blogApi'
import usePageTitle from '@/hooks/usePageTitle'
import { formatDate } from '@/utils/date'
import MarkdownIt from 'markdown-it'

const md = MarkdownIt()

const $route = useRoute()
const blogId = $route.params.id || ''

const blogInfo = reactive({})
// onMounted 获取博客详情
onMounted(async () => {
    const res = await getBlogById(blogId)
    console.log(res)
    blogInfo.title = res.title
    blogInfo.content = res.content
    blogInfo.createdAt = res.createdAt
    blogInfo.updatedAt = res.updatedAt
    blogInfo.category = res.category
    blogInfo.author = res.author
    blogInfo.id = res.id
    blogInfo.likes = res.likes
    blogInfo.comments = res.comments
    blogInfo.favorites = res.favorites
    blogInfo.isLiked = res.isLiked
    blogInfo.isFavorited = res.isFavorited
})

usePageTitle(toRef(blogInfo, 'title'))

</script>

<template>
    <main>
        <!-- 显示 title author createdAt content -->
        <div class="blog-detail">
            <h2>{{ blogInfo.title }}</h2>
            <div class="blog-info">
                <el-icon>
                    <User />
                </el-icon><span class="author">{{ blogInfo.author }}</span>
                <span class="createdAt">{{ formatDate(blogInfo.createdAt) }}</span>
                <span class="category">{{ blogInfo.category }}</span>
            </div>
            <div class="content" v-html="md.render(toRaw(blogInfo.content) || '')"></div>
        </div>
    </main>
</template>

<style scoped>
.blog-detail {
    margin-bottom: 16px;
}

.blog-detail h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.blog-detail .blog-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.blog-detail .blog-info .author {
    color: #999;
}

.content {
    line-height: 1.8;
    font-size: 16px;
    color: #333;
}
</style>